extends ../components/base
block title
    title 角色新建
block common_header
    include ../components/header
    +commonheader(0)
block style
    link(rel="stylesheet", href=__PLUGINS_PATH__ + "/ztree/zTreeStyle.css")
    link(rel='stylesheet', href=__CSS_PATH__ + '/news.css')
    style.
        #main-wrapper {
            margin-top: 10px;
        }
        .ztree{
            margin-left: 0;
        }
block aside_content
    include ../components/mixin
    -var routerObj = [{link:'/',text:'应用',icon:'icon-app'},{link:'/message',text:'消息',icon:'icon-message2'},{link:'/setting/user_manage',text:'平台管理',icon:'icon-setting'}]
    +asideNav(routerObj,2)
block main_content
    include ../components/mixin
    -var menuObj = [{link:'/setting/organization_manage',text:'平台自身管理'},{link:'/setting/contact_manage',text:'对接系统管理'},{link:'/setting/app_manage',text:'第三方应用系统管理'}]
    +menuLink(menuObj,0)
    -var navObj = [{link:'/setting/organization_manage',text:'组织机构管理'},{link:'/setting/user_manage',text:'用户管理'},{link:'#',text:'角色权限管理'},{link:'/setting/region_manage',text:'行政区划分'},{link:'/setting/log_manage',text:'日志管理'}]
    +menuNav(navObj,2)
    +RouteNav('角色新建')
    #inner-wrapper
        .news-create
            .form-control
                label.control-label(for='role') 角色名称:
                input#role.form-control(type='text' name='role' value=roleInfo.name)
            .form-control
                label.control-label 人员选择:
            .role-control(style="margin-top: -40px;")
                .user-list.option-user
                    .list-title
                        i.icon-down
                        .title-item.all
                            span.title-tab 按照人员选择
                        .title-item.dep(style="display:none")
                            span.title-tab 按照部门选择
                    .list-wrapper.allUserOption
                        if(userList.length)
                            each user in userList
                                .list-item(data-person-id=user.id data-person-name=user.name) #{user.name}
                    .list-wrapper.departmentUserOption(style="display:none")
                        .structure
                            ul#tree.ztree(data-node=depAll)
                .role-handle
                    button.work-btn.work-btn-default.work-btn-sm#addSelectUser(type='button' data-type='user') 添加>
                    br
                    button.work-btn.work-btn-default.work-btn-sm#deleteSelectUser(type='button' data-type='user') <删除
                .user-list.select-user
                    .list-title(style='text-align:center;')
                        .title-item
                            span 已选人员
                    .list-wrapper.selectedBox
            input#choosePersonId(type="hidden" value="0" name="choosePersonId")
            input#deptIds(type="hidden" value="user_0" name="deptIds")
            input#roleId(type='hidden' value=roleId name="roleId")
            .form-control.btn-wrapper
                button#addConfirm.btn.btn-default.btn-sm(type='button') 保存
                button.btn.btn-disable.btn-sm(type='button' onclick="window.location.href='/setting/role_manage'" style='margin-left:20px') 取消
block script
    script(type='text/javascript' src=__PLUGINS_PATH__ + '/ztree/jquery.ztree.all.min.js')
    script(type="text/javascript").
        $(document).ready(function () {
            //zTree
            zTreeLoad();
            //初始化选择
            var choosePersonId = $('#choosePersonId');
            if (choosePersonId.length) {
                var chooseArr = choosePersonId.val().split(",");
                //先去掉在左边的人
                var chooseNames = [];
                chooseArr.forEach(function (data, index) {
                    var chooseItem = $('.list-wrapper').find('.list-item[data-person-id=' + data + ']');
                    $('.list-wrapper.selectedBox').append(chooseItem.clone().bind('click',clickItem));
                    chooseNames.push(chooseItem.attr("data-person-name"));
                    chooseItem.remove();
                });
                if ($('#approver').length) {
                    $('#approver').val(String(chooseNames));
                } else {
                    console.log("没找到啊")
                }
            }
        });

        $('.list-title i.icon-down').on('click', function () {
            $('.title-item').show()
        })
        $('.title-item').on('click', function () {
            $(this).siblings('.title-item').hide();
            if ($(this).hasClass('all')) {
                $('.allUserOption').show();
                $('.departmentUserOption').hide();
                $('#addSelectUser').attr('data-type', 'user');
                $('#deleteSelectUser').attr('data-type', 'user');
            } else {
                $('.allUserOption').hide();
                $('.departmentUserOption').show();
                $('#addSelectUser').attr('data-type', 'dp');
                $('#deleteSelectUser').attr('data-type', 'dp');
                console.log('异步刷新数');
                zTreeLoad();
            }
        });
        var clickItem = function () {
            $('.list-item').on('click', function () {
                $('.list-item').removeClass("active");
                $(this).addClass("active");
            });
        };

        clickItem();

        function changeIdTo(id,changeType) {
            var deptIds = $('#deptIds').val().split(',');
            var index  = $.inArray('user_'+id,deptIds);
            if(changeType === 'add'){
                if(index === -1){
                    deptIds.push('user_'+id);
                }
            }else{
                if(index !== -1){
                    deptIds.splice(index, 1);
                }
            }
            $('#deptIds').val(String(deptIds));
        }

        function changeSelectByTree(changeType) {
            var selectIds = $('#deptIds').val().split(",");
            if(changeType === 'add'){
                selectIds.forEach(function (data, index) {
                    var sid = data.split("user_")[1];
                    var chooseItem = $('.list-wrapper').find(".list-item[data-person-id=" + sid + "]");
                    if (!chooseItem.parent().hasClass('selectedBox')) {
                        $('.list-wrapper.selectedBox').append(chooseItem.clone().bind('click', clickItem));
                        chooseItem.remove();
                    }
                });
            }else{
                //删除掉改ID的人员,将人员填会到allUserOption,同时修改deptIds,刷新树
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                var selectId = selectedList.attr("data-person-id");
                if(selectId){
                    changeIdTo(selectId,'remove');
                    zTreeLoad();
                    //将选中的返回去
                    $('.list-wrapper.allUserOption').append(selectedList.clone().bind('click', clickItem));
                    selectedList.remove();
                }else{
                    layerAlert('获取选中人员失败','error');
                }
            }
        }
        
        $('#addSelectUser').click(function () {
            if ($(this).attr('data-type') == 'user') {
                var selectList = $('.list-wrapper.allUserOption').find('.list-item.active');
                if (selectList.length == 0) {
                    layerAlert('请选选择要添加的人','error');
                } else {
                    selectList = selectList.removeClass("active");
                    changeIdTo(selectList.attr('data-person-id'),'add');
                    $('.selectedBox').append(selectList);
                }
            } else {
                var selectDPUsers = $('#deptIds').val();
                if(selectDPUsers === ""){
                    layerAlert('请选选择要添加的人','error');
                }else{
                    console.log("从树添加人");
                    changeSelectByTree('add');
                }
            }
        });

        $('#deleteSelectUser').click(function () {
            if ($(this).attr('data-type') == 'user') {
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                if (selectedList.length == 0) {
                    layerAlert('请选选择要删除的人','error');
                } else {
                    selectedList = selectedList.removeClass("active");
                    changeIdTo(selectedList.attr('data-person-id'),'remove');
                    $('.list-wrapper.allUserOption').append(selectedList);
                }
            } else {
                var selectedList = $('.list-wrapper.selectedBox').find(".list-item.active");
                if (selectedList.length === 0) {
                    layerAlert('请选选择要删除的人','error');
                } else {
                    changeSelectByTree('remove');
                }
            }

        });

        $('.close-node').on('click', function (e) {
            if ($(this).hasClass('open-node')) {
                $(this).removeClass('open-node').addClass('close-node').find('ul').first().hide()
            } else {
                $(this).removeClass('close-node').addClass('open-node').find('ul').first().show()
            }
            $('.structure').find('li').removeClass('selectDP');
            $(this).addClass('selectDP');
            e.stopPropagation();//阻止冒泡
        });


        $('.addCancel').on('click', function () {
            layerCloseAll();
        })

        $('#addConfirm').on('click', function () {
            var personIDs = $('.selectedBox').find(".list-item");
            var personIDArr = [];
            var chooseNameArr = [];
            for (var i = 0; i < personIDs.length; i++) {
                var personID = personIDs[i].getAttribute("data-person-id");
                var personName = personIDs[i].getAttribute("data-person-name");
                personIDArr.push(personID);
                chooseNameArr.push(personName);
            }
            $('#choosePersonId').val(String(personIDArr));

            //ajax提交
            var roleId = $('#roleId').val();
            var name = $('#role').val();
            var usersId = String(personIDArr);
            function goBack() {
                window.location.href = "/setting/role_manage";
            }
            $.post("/setting/role_save",{id:roleId,name:name,userIds:usersId},function (data) {
                if(data.code === 1){
                    layerAlert("操作成功！！",'ok',goBack);
                }else{
                    layerAlert(data.msg,'error');
                }
            },'json')
        });




